//订单管理 - 还款记录

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Form , Input, DatePicker, Select, Row, Col, Table, Tag } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    key: i,
    number: `${i+1}`,
    name: '汤娟娟',
    phone: 15256984314,
    repaymentNumber: 'writeOff14720149661070934432386433025',
    repaymentDate: '2018-12-07 16:25:48',
    repaymentMoney:500,
    repaymentMethod:'销账',
    operator:'超级管理员',
    repaymentStatus:['成功'],
    reason:''
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Repayment extends Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">还款记录</span>
              <div className="btn">
                <Button icon="redo" size="small">刷新</Button>
                <Button icon="delete" size="small" onClick={this.handleDelete}>清空</Button>
                <Button icon="search" size="small" type="primary" onClick={this.handleSearch}>搜索</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('phone', {
                      rules: [{ required: true, message: 'Please input your phone!' }],
                    })(
                      <Input placeholder="手机号" style={{ color: 'rgba(0,0,0,.25)', width: '250px' }} />
                    )}               
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: 'Please input your name!' }],
                    })(
                      <Input placeholder="姓名" style={{ color: 'rgba(0,0,0,.25)', width: '250px' }} />
                    )}                 
                  </FormItem>
                </Col>
                <Col span={5}>
                  <FormItem>
                    {getFieldDecorator('range-picker', rangeConfig)(
                        <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '320px' }} />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('repayMethod', {
                      rules: [{ required: true, message: 'Please input your repayMethod!' }],
                    })(
                      <Select placeholder="还款方式" style={{ color: 'rgba(0,0,0,.25)', width: '250px' }}>
                        <Select.Option value="userRepay">用户还款</Select.Option>
                        <Select.Option value="Supplement">补扣</Select.Option>
                        <Select.Option value="timerDeduction">定时器扣款</Select.Option>
                        <Select.Option value="reconciliation">销账</Select.Option>
                      </Select>
                    )}   
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('repayNumber', {
                      rules: [{ required: true, message: 'Please input your repayNumber!' }],
                    })(
                      <Input placeholder="订单编号" style={{ color: 'rgba(0,0,0,.25)', width: '250px' }} />
                    )} 
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('repayStatus', {
                      rules: [{ required: true, message: 'Please input your repayStatus!' }],
                    })(
                      <Select placeholder="还款状态" style={{ color: 'rgba(0,0,0,.25)', width: '250px' }}>
                        <Select.Option value="applying">申请中</Select.Option>
                        <Select.Option value="working">处理中</Select.Option>
                        <Select.Option value="suc">成功</Select.Option>
                        <Select.Option value="fal">失败</Select.Option>
                      </Select>
                    )} 
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='序号' align='center' dataIndex='number' width='50' />
              <Column title='姓名' align='center' dataIndex='name' width='50' />
              <Column title='手机号' align='center' dataIndex='phone' width='80' />
              <Column title='还款订单号' align='center' dataIndex='repaymentNumber' width='300px' />
              <Column title='还款时间' align='center' dataIndex='repaymentDate' width='60' />
              <Column title='还款金额' align='center' dataIndex='repaymentMoney' width='60' />
              <Column title='还款方式' align='center' dataIndex='repaymentMethod' width='60' />
              <Column title='操作人员' align='center' dataIndex='operator' width='60' />
              <Column title='还款状态' align='center' dataIndex='repaymentStatus' width='70' 
                render={repaymentStatus => (
                  <span>
                    {repaymentStatus.map(repaymentStatus => <Tag color="green" key={repaymentStatus}>{repaymentStatus}</Tag>)}
                  </span>
                )} />
              <Column title='原因' align='center' dataIndex='reason' width='200px' />
              <Column title='操作' align='center' dataIndex='cz' width='70' 
                render={cz => (
                  <span>
                    <Button size="small" disabled key={cz}>查询</Button>
                  </span>
                )} />
            </Table>
          </div>
        </div>
      </LocaleProvider>  
		);
	}
}

const repaymentForm = Form.create()(Repayment);

export default repaymentForm;